<template>
  <div id="Home">
          <div class="jianbianDiv">
          </div>
    <div v-if="isSearch == false" style="">
          
          <div class="mySearch_heads" >
                            
              <div class="blocks"></div>

              <div class="mySearch_lefts"> <img src="/static/bottom/二维码.png" alt=""> </div>
              <div class="mySearch_inputs form-input-wrap f-l">
                  <form action="" class="input-kw-form">
                        <input type="search" v-model="value" placeholder="请输入关键词" class="input-kw" @focus="getFocus">
                  </form>
                  <i class="iconfont if-message"></i>
                    <i class="iconfont if-close"></i>
              </div>
              <div class="mySearch_cancel" > <img src="/static/bottom/fenleidi@2x.png" alt=""> </div>
              
          </div>
        <swiper loop auto :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange"></swiper>
      <div id="myselfWrap">
         <flexbox :gutter="0" wrap="wrap" >
          <flexbox-item :span="1/4" v-for="(item , i) in classifyData" :key="i" @click.native="goHeader(item)">
            <div class="flex-demo12">
              <img width="30" :src="item.imgUrl" alt="">
              <p>{{item.title}}</p>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
 <!-- 秒杀滑动 -->   
    <flexbox :gutter="0" wrap="wrap">
        <flexbox-item :span="1/2" >
          <div class="second_left">
            <p class="secondTitles">限时~秒杀</p>
            <!-- <div class="killsecondTime">
              <span>07</span>：
              <span>45</span>：
              <span>42</span>
              后开始
            </div> -->
            <div class="miaoshaTimes">
                    <clocker time="2018-03-15">
                    <span class="day">%_D1</span>
                    <span class="day">%_D2</span>天
                    <span class="day">%_H1</span>
                    <span class="day">%_H2</span>时
                    <span class="day">%_M1</span>
                    <span class="day">%_M2</span>分
                    <span class="day">%_S1</span>
                    <span class="day">%_S2</span>秒
                  </clocker>
            </div>
          
            <p class="moresinfo">众多精美商品等你秒杀</p>
       
        
            <div class="secondkillImg" @click="moreKill">
              <img :src="urlList(secondkillshopone[0].goods.product_thumb_image)" alt="">
            </div>
          </div>
        </flexbox-item>
        <flexbox-item :span="1/2" >
          <flexbox :gutter="0" wrap="wrap">
            <flexbox-item :span="1/2" v-for="(item , i) in activeData" :key="i" @click.native="goGoodsDetail(item.goods.goodsid)">
              <div class="second_rightItem">
                  <div><img :src="urlList(item.goods.product_thumb_image)" alt=""></div>
                  <div>￥{{item.goods.shop_price}}</div>
                  <div>￥{{item.goods.market_price}}</div>                  
              </div>
            </flexbox-item>
        </flexbox>
        </flexbox-item>
      </flexbox>
   <!-- <div class="hot_wraps">
     <div class="hot_wraps_div hot_wraps_div1"> <span class="hot_wraps_remen_span">热门购 </span> </div>
     <div class="hot_wraps_div hot_wraps_ms_p"> 
       <span class="hot_wraps_ms_span">秒杀</span>-<span>聚惠购</span>， <span>03:12:10</span>  
        <div class="getyoudiv" @click="moreKill">
          <span>更多秒杀商品</span>
          <img src="static/cart/yjt.png" alt="">
        </div>
     </div>

    <div class="box1">
      <div class="hotGoods" v-for="(item , i) in activeData" :key="i" @click="goGoodsDetail(item.goodsid)">
        <div class="hot_photos">
          <img v-bind:src="killShops(item.goodsimage)" alt="">
        </div>
      <div><span class="titles_span1">￥{{item.goodsproprice}}</span> </div>
      <div><span class="titles_span2">8.1折</span></div>
      </div>
    </div>
   </div> -->
   
<!-- tab -->
<div class="tabBox1">
  
  <div class="tabDiv2">
      <checker
      default-item-class="tabDiv_li-item"
      selected-item-class="tabDiv_li-item-selected"
      disabled-item-class="tabDiv_li-item-disabled">
        <checker-item  v-for="(item,index) in titleClassifyData" :key="index" :value="item.name" @on-item-click="onItemClicks(item.id)"> {{item.name}} </checker-item>
      </checker>
  </div>
  <div style="clear:both"></div>
</div>

  <div class="tabBox2">
    <img :src="getSanJiImg(detailClassify[0].image)" alt="">
  </div>

  <div class="tabBox3">
    <div class="tabBox3_imgdiv"  v-for="(items,indexs) in detailClassify" :key="indexs" :value="items.name" @click="classifyClick(items.id)">
      <img :src="getSanJiImg(items.image)" alt="">
      <p>{{items.name}}</p>
    </div>
  </div>

  <!-- 广告 -->
  <div id="shopsAd">
        <swiper auto height="100px">
          <swiper-item class="swiper-demo-img" v-for="(item, index) in adList" :key="index"  @on-index-change="demo06_onIndexChange"><img :src="item"></swiper-item>
        </swiper>
        <!-- <swiper loop auto :list="adList" :index="adList_index" @on-index-change="demo06_onIndexChange"></swiper> -->
  </div>
   <!-- 新品推荐 -->
      <!-- <div class="news_recommend">
       <h2 class="good_tip">新品推荐</h2>
        <flexbox :gutter="0" wrap="wrap">
          <flexbox-item :span="1/2" v-for="(item , i) in new_gooods" :key="i" @click.native="goGoodsDetail(item.goodsid)">
            <div class="newGoods">
              <div class="new_photos"><img :src="urlList(item.images)" alt=""></div>
              <div class="newTitles">{{item.goodsname}}</div>
              <div class="newInfo">{{item.standard}}</div>
              <div class="newPrices">￥{{item.price}}</div>   
            </div>
          </flexbox-item>
        </flexbox>
      </div> -->
             <div class="good_tip">新品~推荐</div>
      <shoplist-page :shoplistData="shoplistData"></shoplist-page>
      <divider>亲,已经没有东西了哦！</divider>
    </div>
    
      <div v-else>
        <!-- <search-page></search-page> -->
        <classify-page :classifyData="classifyData"></classify-page>
      </div>
        <alert v-model="tankuang" :title="('提示')" @on-show="onShow" @on-hide="onHide">暂无数据</alert>

      </div>
</template>

<script>
import {
  Swiper,
  Scroller,
  SwiperItem,
  Grid,
  GridItem,
  GroupTitle,
  Flexbox,
  FlexboxItem,
  Divider,
  Search,
  Group,
  Cell,
  Checker,
  CheckerItem,
  Calendar,
  Badge,
  CellBox,
  XButton,
  Clocker,
  Alert
} from "vux";
import searchPage from "../components/toolComponent/searchPage";
import { homeUrl } from "../components/utils/utils.js";
import shoplistPage from "../components/toolComponent/shoplistPage";
import classifyPage from "../components/toolComponent/classifyPage";

import $ from "jquery";
import axios from "axios";
import qs from "qs";
$(function() {
  var $body = $("#Home");
  var setCoverOpacity = function() {
    console.log("ok");
    $("body")
      .find(".jianbianDiv")
      .css({
        opacity:
          $("body").scrollTop() / 150 > 0.9 ? 1 : $("body").scrollTop() / 150
      });
  };
  //初始化设置背景透明度
  setCoverOpacity();
  //监听滚动条事件，改变透明度
  $("body").scroll(function() {
    setCoverOpacity();
  });
});

const baseList = [
  {
    url: "javascript:",
    img: "https://static.vux.li/demo/1.jpg"
  },
  {
    url: "javascript:",
    img: "https://static.vux.li/demo/2.jpg"
  },
  {
    url: "javascript:",
    img: "https://static.vux.li/demo/3.jpg"
  }
];

const urlList = baseList.map((item, index) => ({
  url: "/goods/goods_detail",
  img: item.img
}));
export default {
  components: {
    Scroller,
    searchPage,
    Swiper,
    SwiperItem,
    Grid,
    GridItem,
    GroupTitle,
    Flexbox,
    FlexboxItem,
    Divider,
    Search,
    Group,
    Cell,
    Checker,
    CheckerItem,
    XButton,
    shoplistPage,
    Calendar,
    Badge,
    CellBox,
    XButton,
    classifyPage,
    Clocker,
  Alert
    
  },
  watch: {
    $route: "uploadAd"
  },
  data() {
    return {
      demo06_list: urlList,
      adList: "",
      adList_index: 0,
      isSearch: false,
      value: "",
      demo06_index: 0,
      swiperItemIndex: 1,
      results: [],
      shoplistData: "",
      titleClassifyData: [],
      detailClassify: [],
      secondkillshopone: [],
      allSecondKill: [],
      demo6: [],
      tankuang:false,
      srcUrl: "http://www.dangsh.top/static/myfile/",
      items: "",
      classifyData: [
        {
          imgUrl: "static/bottom/团队.png",
          title: "团队",
          routePath: "/personal/vip_manage"
        },
        {
          imgUrl: "static/bottom/返利.png",
          title: "返利",
          routePath: "/personal/backMoney"
        },
        {
          imgUrl: "static/bottom/推荐.png",
          title: "推荐",
          routePath: "/personal/myRecommend"
        },
        {
          imgUrl: "static/bottom/zuji.png",
          title: "购买记录",
          routePath: "/personal/myBuyHistory"
        },
        {
          imgUrl: "static/bottom/chongzhi@2x.png",
          title: "积分商城",
          routePath: "/personal/jifenExchange"
        },
        {
          imgUrl: "static/bottom/地址.png",
          title: "收货地址",
          routePath: "/goods/goods_address"
        },
        {
          imgUrl: "static/bottom/youhaodu@2x.png",
          title: "签到",
          routePath: "/personal/mySigned"
        },
        {
          imgUrl: "static/bottom/tuijian@2x.png",
          title: "分享记录",
          routePath: "/personal/myShare"
        }
      ],
      activeData: [
        {
          hotGoodsUrl:
            "https://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000190680590_1_220x220.jpg?ver=2043",
          hotGoodsPrice: "￥1299",
          hotGoodsDiscount: "8.1"
        },
        {
          hotGoodsUrl:
            "https://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000190680590_1_220x220.jpg?ver=2043",
          hotGoodsPrice: "￥1299",
          hotGoodsDiscount: "8.1"
        },
        {
          hotGoodsUrl:
            "https://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000190680590_1_220x220.jpg?ver=2043",
          hotGoodsPrice: "￥1299",
          hotGoodsDiscount: "8.1"
        },
        {
          hotGoodsUrl:
            "https://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000190680590_1_220x220.jpg?ver=2043",
          hotGoodsPrice: "￥1299",
          hotGoodsDiscount: "8.1"
        },
        {
          hotGoodsUrl:
            "https://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000190680590_1_220x220.jpg?ver=2043",
          hotGoodsPrice: "￥1299",
          hotGoodsDiscount: "8.1"
        },
        {
          hotGoodsUrl:
            "https://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000190680590_1_220x220.jpg?ver=2043",
          hotGoodsPrice: "￥1299",
          hotGoodsDiscount: "8.1"
        }
      ],
      new_gooods: [],
      lunboData: [
        {
          url: "javascript:",
          img: "https://static.vux.li/demo/1.jpg"
        },
        {
          url: "javascript:",
          img: "https://static.vux.li/demo/2.jpg"
        },
        {
          url: "javascript:",
          img: "https://static.vux.li/demo/3.jpg"
        }
      ]
    };
  },
  methods: {
    onChange(val) {
      console.log("on change", val);
    },
    // 获取轮播图
    uploadlunbo() {
      this.$http.get(homeUrl() + "getRecommendGoods/").then(
        result => {
          console.log(result);
          if (result.data.status == "ok") {
            const baseList = result.data.data;
            const urlList = baseList.map((item, index) => ({
              url: "/goods/goods_detail",
              img: homeUrl() + item.recommendImg
            }));
            this.demo06_list = urlList;
          }
        },
        error => {
          this.$vux.toast.text("网络请求失败....", "bottom");
          console.log(error);
        }
      );
    },
    // 获取广告
    uploadAd() {
      this.$http.get(homeUrl() + "adManageJsonSelect/").then(
        result => {
          console.log(result);
          if (result.data.status == "ok") {
            const baseList_ad = result.data.data;
            // const urlList_ad = baseList_ad.map((item, index) => ({
            //   url: "/goods/goods_detail",
            //   img: homeUrl() + item.imgPath
            // }));
            let arr = [];
            for (let key in baseList_ad) {
              arr.push(homeUrl() + baseList_ad[key].imgPath);
            }
            this.adList = arr;
          }
        },
        error => {
          this.$vux.toast.text("网络请求失败....", "bottom");
          console.log(error);
        }
      );
    },
    // 获取商品列表
    shopList() {
      var datas = {
        page: 0
      };
      this.$http.get(homeUrl() + "getShangjiaGoodsList/", datas).then(
        result => {
          // console.log(result.data.data);
          var searchArr = [];
          if (result.data.status == "ok") {
            this.new_gooods = result.data.data;
            // console.log(this.new_gooods)
            for (var i = 0; i < this.new_gooods.length; i++) {
              console.log(this.new_gooods[i]);
              var searchObj = {};
              searchObj.src = this.urlList(
                this.new_gooods[i].product_thumb_image
              );
              // ;
              searchObj.title = this.new_gooods[i].goodsname;
              searchObj.desc = this.new_gooods[i].standard;

              searchObj.goodsid = this.new_gooods[i].goodsid;
              searchObj.shop_price = this.new_gooods[i].shop_price;
              searchObj.market_price = this.new_gooods[i].market_price;

              searchObj.rebate = "返利￥" + this.new_gooods[i].rebate + "元";
              searchObj.kucun = this.new_gooods[i].counts;
              searchObj.sellCount = this.new_gooods[i].sellcount;

              searchArr.push(searchObj);
            }
            this.shoplistData = searchArr;
            console.log(searchArr);
          }
        },
        error => {
          this.$vux.toast.text("网络请求失败....", "bottom");
          console.log(error);
        }
      );
    },
    urlList(imgObj) {
      if (imgObj != null) {
        //  var datasSrc=imgObj.split("---");
        var srcUrl = homeUrl() + imgObj;
        console.log(srcUrl);
        return srcUrl;
      }
    },
    getCurrentImg(imgObj) {
      var srcUrl = homeUrl() + "static/myfile/" + imgObj;
      // console.log(srcUrl)
      return srcUrl;
    },
    // 商品列表点击
    goGoodsDetail(goodsId) {
      console.log(goodsId);
      this.$router.push({
        name: "goods_detail",
        params: {
          goodsId: goodsId
        }
      });
    },
    moreKill() {
      this.$router.push({
        name: "secondKillList",
        params: {
          secondKillList: this.allSecondKill
        }
      });
    },
     onHide() {
      console.log("on hide");
    },
    onShow() {
      console.log("on show");
    },
    // .....
     goHeader: function(item) {
      console.log(item);
      console.log("开始跳转界面");
      // if(item.title="积分商城"){
      //   localStorage.setItem("fromPosition" , "jifen")
      // this.$router.push({ path: "myHistory"});
        
      // }
      this.$router.push({ path: item.routePath,params: { userInfo:this.userInfo }});
        
    },
    // 分类点击
    // 分类点击
    classifyClick(classifyId) {
      console.log(classifyId);
      var datas = qs.stringify({
        minFenleiId: classifyId,
        page: 1
      });
      axios
        .post(homeUrl() + "getGoodsByMinfenleiId/", datas, {
          emulateJSON: true
        })
        .then(
          result => {
            console.log("qianhaui");
            console.log(result.data.data);
            if(result.data.data.length==0){
            this.tankuang=true

            }else{
      this.isSearch=true;
              
               var rs=[];
            rs.push(result.data.data);
             this.isSearch = true;
            this.classifyData = rs;
            console.log(rs)
            }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    },

    getSanJiImg(images) {
      // console.log(images)
      var shopImgs = homeUrl() + images;
      return shopImgs;
    },
    setFocus() {
      this.$refs.search.setFocus();
    },
    resultClick(item) {
      // this.$data.isSearch = true;
      // console.log(JSON.stringify(item));
    },
    getResult(val) {
      console.log("on-change", val);
      this.results = val ? getResult(this.value) : [];
    },
    onSubmit() {
      this.$refs.search.setBlur();
      this.$vux.toast.show({
        type: "text",
        position: "top",
        text: "on submit"
      });
    },
    onFocus() {
      console.log("on focus");
    },
    onCancel() {
      this.$data.isSearch = false;
    },
    onScroll(event) {
      // console.log(this.$refs.myGroup[0].$el.getBoundingClientRect().height)
      var currentScrollTop = event.top;
      // console.log(this.$refs.groupTitle[0].$el.getBoundingClientRect().top)
      var allGroup = this.$refs.myGroup;
      var calHeight = 0;
      for (var i = 0; i < allGroup.length; i++) {
        calHeight += allGroup[i].$el.getBoundingClientRect().height;
        if (currentScrollTop < calHeight - 100) {
          this.$data.currentLeftIndex = i;
          return;
        }
      }
    },
    // 秒杀
    miaokill() {
      var that = this
      this.$http.get(homeUrl() + "secondkillManageJsonSelect/").then(
        result => {
          console.log("ooooooooooooo")
          console.log(result.data.data);
          that.allSecondKill = result.data.data;
          that.activeData = result.data.data.slice(2, 6);
          // console.log(result.data.data.slice(0,1));
          // this.secondkillshopone = result.data.data.slice(4, 5);
          that.secondkillshopone = result.data.data.slice(0 , 1)

          // var arrs=[];
          // if (result.data.status == "ok") {
          //   this.new_gooods = result.data.data;
          // }
        },
        error => {
          that.$vux.toast.text("网络请求失败....", "bottom");
          console.log(error);
        }
      );
    },
    killShops(imgUrl) {
      return homeUrl() + "static/myfile/" + imgUrl;
    },
    secondDetail() {},
    onCellClick(clickIndex) {
      var allGroup = this.$refs.myGroup;
      var toTop = 0;
      for (var i = 0; i < clickIndex; i++) {
        toTop += allGroup[i].$el.getBoundingClientRect().height;
      }

      this.$refs.rightScroller.reset({ top: toTop, duration: 1000 });
      this.$data.currentLeftIndex = clickIndex;
    },
    onItemClick() {
      console.log("on item click");
    },
    demo06_onIndexChange(index) {
      this.demo06_index = index;
    },
    // 搜索框获取焦点事件
    getFocus() {
      console.log("pppp");
      this.$router.push({ name: "goSearch", params: {} });
    },
    // 获取分类
    classifyDataFn() {
      this.$http.get(homeUrl() + "allBigFenlei/").then(
        result => {
          if (result.data.status == "ok") {
            console.log("/////////////////////");
            this.titleClassifyData = result.data.data.slice(0, 6);
            console.log(result.data.data.slice(0, 5));
            this.onItemClicks(this.titleClassifyData[0].id);
            // 修改右侧分类数据的结构
            // this.modifyMinData(result.data.data)
          }
          // this.$vux.toast.text(result.data.message, 'bottom')
        },
        error => {
          this.$vux.toast.text("网络请求失败....", "bottom");
          console.log(error);
        }
      );
    },
    onItemClicks(itemid) {
      console.log(itemid);
      var datas = qs.stringify({
        dafenleiId: itemid
      });
      axios
        .post(homeUrl() + "getAllFenleiByDafenleiId/", datas, {
          emulateJSON: false
        })
        .then(
          result => {
            console.log(result);
            if (result.data.status == "ok") {
              this.detailClassify = result.data.data[0].data;
              console.log(result.data.data);
              // this.getClassifyData(sanjiClass)
            }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    },
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    // 获取微信的用户信息
    getUserInfo() {
      // alert("wo shi 用户信息首页界面")
      // function

      var localUrl = location.href.split("#")[0];
      var code = this.getQueryString("code");

      var openid = localStorage.getItem("openid");
      // alert("我是openid");
      // alert(openid);

      var getUrlInfoUrl = homeUrl() + "getOpenidByCode/?";

      if (
        openid == null ||
        openid == "" ||
        openid.length <= 10 ||
        openid == undefined
      ) {
        getUrlInfoUrl = getUrlInfoUrl + "code=" + code;
      } else {
        getUrlInfoUrl = getUrlInfoUrl + "openid=" + openid;
      }
      // ................

      var that = this
      this.$http.get(getUrlInfoUrl).then(
        result => {
          // alert(";;;;;00000");
          // alert(JSON.stringify(result.data));
            // localStorage.setItem("userInfos", result.data);
          
          if (result.data.openid == undefined || result.data.errcode > 1000) {
            // localStorage.setItem("removeItem");

            localStorage.removeItem("openid")

            that.$http
              .get(homeUrl() + "clearAccess_tokenAndJsapi_ticket/")
              .then(
                result => {
                  // alert("buhzudiug")
                  // alert(result.data);
                  // this.$vux.toast.text(result.data.message, 'bottom')
                },
                error => {
                  this.$vux.toast.text("网络请求失败....", "bottom");
                  // alert(error)
                  console.log(error);
                }
              );
          } else {
            var getOpenid = result.data.openid;
            var users=JSON.stringify(result.data);
            localStorage.setItem("userInfos", users);
            // alert(JSON.stringify(users))
            // alert("从服务器上获取的openid");
            // alert(getOpenid);

            // localStorage.setItem("openid", getOpenid);
            // aler("存到缓存中了");
            
          }
          // this.$vux.toast.text(result.data.message, 'bottom')
        },
        error => {
          this.$vux.toast.text("网络请求失败....", "bottom");
          console.log(error);
        }
      );


    }
  },
  mounted() {
    var windowHeight = $(window).height();
    var headerHeight = $(".vux-header").outerHeight();
    var searchBoxHeight = $(".vux-search-box").outerHeight();
    var tabHeight = $(".weui-tabbar").outerHeight();
    this.$data.myHeight =
      windowHeight - headerHeight - searchBoxHeight - tabHeight + "px";
  },

  beforeCreate: function() {
    // console.log("创建前");
  },

  created: function() {
    console.log("创建之后");
    this.uploadAd();
    this.uploadlunbo();
    this.shopList();
    this.miaokill();
    this.classifyDataFn();
    this.getUserInfo();
  },

  beforeMount: function() {
    // console.log("mount之前");
  },

  mounted: function() {
    // console.log("mount之后");
  },

  beforeUpdate: function() {
    // console.log("更新前");
  },

  updated: function() {
    // console.log("更新完成");
  },

  beforeDestroy: function() {
    // console.log("销毁前");
  },

  destroyed: function() {
    // console.log("已销毁");
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // 让 A 不缓存，即刷新
    next();
  }
};
function getResult(val) {
  let rs = [];
  for (let i = 0; i < 20; i++) {
    rs.push({
      title: `${val} result: ${i + 1} `,
      other: { number: i }
    });
  }
  return rs;
}
</script>
<style  scoped>
#Home {
  margin-bottom: 60px;
}
#Home #myselfWrap{
  background: #ffffff;
  padding: 15px;
  margin-bottom: 10px
}
#Home #myselfWrap .flex-demo12 {
  /* height: 40px;  */
  /* line-height: 20px;  */
  text-align: center;
  margin-top: 0.6rem;
  color: #666;
  background-clip: padding-box;
}
#logoDiv {
  position: absolute;
  top: 0.9375rem;
  left: 0.9rem;
  z-index: 99999999;
}
.grid-center {
  display: block;
  text-align: center;
  color: #666;
}
.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
}
.flex-demo {
  text-align: center;
  color: #fff;
  /* background-color: #20b907; */
  border-radius: 4px;
  background-clip: padding-box;
  height: 5rem;
  margin: 0.625rem;
}
.photos img {
  /* width: 70%; */
  height: 3.125rem;
  /* border-radius: 50% */
}
.titles {
  line-height: 1.875rem;
  font-size: 12px;
  color: #666;
}
.titles_span1 {
  color: #ed393d;
}
.titles_span2 {
  font-size: 0.9rem;
  text-decoration: line-through;
  /* position: absolute */
}
.wraps {
  width: 100%;
  background: #ffffff;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}
.swiper-demo-img img {
  width: 100%;
}
.box1 {
  width: 100%;
  height: 11.375rem;
  overflow-x: scroll;
  /* 内容会被裁剪，会以滚动条显示 */
  overflow-y: hidden;
  /* 超出内容不可见 */
  white-space: nowrap;
  /* 不换行 */
  /* 文本不会换行，会在同一行上继续，直到遇到<br>为止 */
}
.secondKillMore {
  width: 10px;
  background: red;
  height: 8rem;
}
.hotGoods {
  display: inline-block;
  width: 7.25rem;
  text-align: center;
  /* background-color: #20b907; */
  border-radius: 4px;
  background-clip: padding-box;
  /* height: 10rem; */
  margin-top: 0.625rem;
  margin-right: 0.625rem;
}
.hot_photos img {
  width: 80%;
  height: 6.25rem;
}
.hot_wraps {
  width: 100%;
  margin-top: 0.625rem;
  padding: 0.6rem 0px;
  background: #ffffff;
}
.hot_wraps .hot_wraps_div {
  padding-left: 1.25rem;
}
.hot_wraps_div1 {
  padding-bottom: 0.5rem;
}
.hot_wraps_remen_span {
  font-size: 1.1rem;
  color: #000000;
}
.hot_wraps_ms_span {
  font-size: 1.3rem;
  color: gold;
}
.hot_wraps_ms_p {
  font-size: 0.75rem;
  line-height: 1.25rem;
}
.getyoudiv {
  float: right;
  font-size: 0.8rem;
  color: rgb(131, 131, 131);
  margin-right: 1rem;
  vertical-align: top;
}
.getyoudiv img {
  width: 0.5rem;
}
.newGoods {
  text-align: center;
  border-radius: 5px;
  /* box-shadow: 0.1px 0.2px 0.2px #d3d2d2; */
  background: #ffffff;
  background-clip: padding-box;
  padding: 0.3rem 0.3rem;
  margin: 0.2rem;
}
.news_recommend {
  width: 100%;
  margin-top: 10px;
}
.new_photos img {
  width: 100%;
  height: 160px;
}
.good_tip {
  text-align: center;
  line-height: 30px;
  color: #ed393d;
  font-weight: 700;
}
.newTitles,
.newInfo,
.newPrices {
  text-align: left;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* font-size: 12px; */
  padding-left: 1rem;
  line-height: 21px;
}
.newInfo {
  color: #999999;
}
.newTitles {
  font-size: 13px;
}
.newPrices {
  color: #ed393d;
}
#sets {
  width: 100%;
  position: absolute;
  top: 0px;
  z-index: 1000000;
  /* left: 8%; */
  /* background: #000000 */
}

.tabBox1 {
  margin-top: 1rem;
  padding: 0.5rem 0rem;
  background: #ffffff;
  border-bottom: 1px solid rgba(231, 231, 231, 0.5);
}
.tabDiv1 {
  width: 20%;
  height: 2rem;
  float: left;
  background: #ffffff;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.tabDiv_li1 {
  background-color: #f4f8fb;
  color: #222;
  font-size: 14px;
  padding: 5px 10px;
  margin-right: 10px;
  line-height: 18px;
  text-align: center;
  border-radius: 15px;
}
.tabDiv_li1-selected {
  height: 2rem;
  display: inline-block;
  margin-left: 0.5rem;
  border-radius: 25px;
  text-align: center;
  line-height: 2rem;
  padding: 0px 1rem;
  background: #881b1b;
}
.tabDiv2 {
  width: 100%;
  height: 2rem;
  float: left;
  background: #ffffff;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.tabDiv_li {
  height: 2rem;
  display: inline-block;
  border-radius: 25px;
  text-align: center;
  line-height: 2rem;
  padding: 0px 1rem;
  margin-left: 1rem;
  background: #f4f8fb;
}
.tabBox2 {
  margin-bottom: 0rem;

  padding: 0.5rem 0.5rem;
  background: #ffffff;
}
.tabBox2 img {
  width: 100%;
  height: 180px;
  border-radius: 5px;
}
.tabBox3 {
  height: 8rem;
  width: 100%;
  background: #ffffff;
  /* padding: 0.5rem; */
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.tabBox3_imgdiv {
  width: 6rem;
  height: 6rem;
  margin-left: 1rem;
  display: inline-block;
  background: #ffffff;
}
.tabBox3_imgdiv img {
  width: 6rem;
  height: 6rem;
  border-radius: 5px;
}
.tabBox3_imgdiv p {
  text-align: center;
}
#shopsAd {
  margin-top: 10px;
}

#shopsAd img {
  height: 100%;
}

.tabDiv_li-item {
  background-color: #f4f8fb;
  color: #222;
  font-size: 14px;
  padding: 5px 10px;
  margin-right: 10px;
  line-height: 18px;
  border-radius: 15px;
}
.tabDiv_li-item-selected {
  background-color: #ed393d;
  color: #fff;
}
.tabDiv_li-item-disabled {
  color: #999;
}
#shopsAd .vux-slider > .vux-swiper > .vux-swiper-item > a > .vux-img {
  height: 30px !important;
}
.mySearch_heads {
  /* height: 35px; */
  /* background: rgb(131, 201, 191); */
  display: flex;
  padding-top: 0.6rem;
  position: fixed;
  /* top:10px; */
  width: 100%;
  z-index: 999999999999999999;
}
.jianbianDiv {
  height: 46px;
  background: rgb(131, 201, 191);
  /* display: flex; */
  /* padding: 6px; */
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 1;
}
.blocks {
  /* width: 20px */
}
.mySearch_lefts {
  width: 25px;
  text-align: center;
  /* background: #ffffff; */
  /* line-height: 35px; */
  /* border-right: 1px solid #cccccc; */
  border-radius: 5px;
}
.mySearch_lefts img {
  width: 20px;
}
.mySearch_inputs {
  flex: 2;
  width: 100%;
}
.mySearch_inputs input {
  /* width: 100%;
  height: 35px;
  border: none;
  border-radius: 5px;
  background: #ffffff;
  border-radius: 20% */
}
.mySearch_cancel {
  width: 40px;
  text-align: center;
  /* background: red; */
  line-height: 35px;
}
.mySearch_cancel img {
  width: 18px;
}
.hot_search {
  height: 160px;
  background: #ffffff;
}
.search_hository {
  margin-top: 10px;
  background: #ffffff;
  height: 300px;
}
.mySearch_inputs input[type="search"] {
  border-radius: 30px;
  border: 1px solid #ebebeb;
  width: 98%;
  height: 30px;
  outline: none;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  color: #666;
}
.mySearch_inputs input[type="search"]::-webkit-input-placeholder {
  text-align: center;
  color: #666;
}
.mySearch_inputs input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.mySearch_inputs input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;

  position: relative;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #ebebeb;
}

.mySearch_inputs input[type="search"]::-webkit-search-cancel-button:after {
  position: absolute;
  content: "x";
  left: 25%;
  top: -12%;
  font-size: 20px;
  color: #666;
}
.second_left {
  width: 100%;
  height: 260px;
  background: #ffffff;
  border: 1px solid #f4f4f4;
}
.second_rightItem {
  height: 128px;
  background: #ffffff;
  border: 1px solid #f4f4f4;
  /* padding: 5px 5px */
  text-align: center;
}
.second_rightItem div:nth-child(1) img {
  width: 80px;
  height: 80px;
  margin-top: 5px;
}
.second_rightItem div:nth-child(2) {
  color: #ed393d;
  font-size: 10px;
}
.second_rightItem div:nth-child(3) {
  color: #666;
  font-size: 10px;
  text-decoration: line-through;
}
.secondTitles {
  color: #ed393d;
  padding-left: 10px;
  font-weight: 700;
  padding-top: 5px;
}
.killsecondTime {
  padding-left: 10px;
}
.killsecondTime span {
  display: inline-block;
  background: #666;
  color: #ffffff;
  border-radius: 10px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 12px;
}
.moresinfo {
  padding-left: 10px;
  padding-top: 5px;
}
.secondkillImg {
  text-align: center;
}
.secondkillImg img {
  width: 165px;
  height: 165px;
  margin-top: 5px;
}
.day {
  background-color: #000;
  color: #fff;
  text-align: center;
  display: inline-block;
  padding: 0 2px;
  border-radius: 3px;
  font-size: 12px;
}
.miaoshaTimes {
  padding-left: 5px;
}
</style>
